<template>
	<Layout class="menu-left">
		<Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
			<Row v-show="!switchFlag" class="query-form">
				<Col span="8">
				<FormItem label="集团名称：" prop="companyId">
					<!--<cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
					<Select class='w' placeholder="集团名称" v-model='dataToQuery.twoLevelId'>
						<Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
					</Select>
				</FormItem>
				</Col>
				<Col span="8">
				<Button @click="reset" class="ivu-btn-reset">重置</Button>
				<Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>
		</Form>
		<Row :gutter="24" style="margin-top: 15px">
			<Col span="12">
			<Card dis-hover>
				<div ref="echart1" :style="{height: '200px'}"></div>
			</Card>
			</Col>
			<Col span="12">
			<Card dis-hover>
				<div ref="echart2" :style="{height: '200px'}"></div>
			</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 15px">
			<Col span="12">
			<Card dis-hover>
				<div ref="echart3" :style="{height: '200px'}"></div>
			</Card>
			</Col>
			<Col span="12">
			<Card dis-hover>
				<div ref="echart4" :style="{height: '200px'}"></div>
			</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 15px">
			<Col span="12">
			<Card dis-hover>
				<div ref="echart5" :style="{height: '200px'}"></div>
			</Card>
			</Col>
			<Col span="12">
			<!-- <Card dis-hover>
				<div ref="echart4" :style="{height: '290px'}"></div>
			</Card> -->
			</Col>
		</Row>
		<!-- <div class="table-box">
			<Table ref='table' :height="this.Common.tableHeightNum" no-data-text="没有查询到相关数据!"
				:loading='pageStatus.loading' :row-class-name="(row,index)=>(index===0)?'table-summary-row':''" border
				:columns="columns" :data="dataTable">
			</Table>
		</div> -->
		<Modal :title="modalTitle" :transfer=false v-model="modelVisible" :width=1000 footer-hide>
			<Table v-if='eqVisible' :loading="pagedata1.loading" size="small" class="table" :height=450
				no-data-text="没有查询到相关数据!" highlight-row stripe border :columns="eqColumns" width="100%"
				:data="eqInfo">
			</Table>
			<Table v-if='samVisible' :loading="pagedata1.loading" size="small" class="table" :height=450
				no-data-text="没有查询到相关数据!" highlight-row stripe border :columns="samColumns" width="100%"
				:data="samInfo">
			</Table>
			<Page :total="pagedata1.total" :current="pagedata1.fromPage" :pageSize="pagedata1.pageSize"
				@on-change="pageChange1" @on-page-size-change='pageSizeChange1' show-total show-sizer show-elevator />
		</Modal>
	</Layout>
</template>
<script>
	import {
		Api
	} from '@/api/index.js'
	import echarts from 'echarts'
	var cascaderDom = () => import('@/components/cascader-dom.vue');
	import pageCommonFunction from '@/components/pageCommonFunction.js'
	export default {
		name: "investmentStatistics",
		components: {
			cascaderDom
		},
		data() {
			return {
				...this.createCommonDataField(),
				pagedata1: {
					total: 0,
					pageSize: 10,
					currentPage: 1,
					// pageSizeArray: [10, 20, 50],
				},
				echartsName: '',
				modelVisible: false,
				modalTitle: '',
				eqVisible: false,
				eqInfo: [],
				eqColumns: [
				    {title: '序号',width: 65,fixed: 'left',align: 'center',render: (h, params) => {
				    	return h('span', params.index + (this.pagedata1.currentPage - 1) * this.pagedata1.pageSize + 1);}},{key: 'companyName', title: '企业名称', align: 'center', width: 200},
				    {key: 'companyAddressName', title: '所在省市', align: 'center', width: 140},
				    {key: 'categoryName', title: '设备类型', align: 'center', width: 150},
				    {key: 'eqName', title: '设备名称', align: 'center', width: 150},
				    {key: 'eqModel', title: '规格型号', align: 'center', width: 160},
				    {key: 'manufacture', title: '制造单位', align: 'center', width: 150},
				    {key: 'certificationNum', title: '产品合格证号', align: 'center', width: 140},
				    {key: 'licenceNum', title: '使用许可证号', align: 'center', width: 150},
				    {key: 'registerNum', title: '设备注册证号', align: 'center', width: 200},
				    {key: 'startDate', title: '投用日期', align: 'center', width: 120, render: this.renderCellDate},
				    {key: 'examDate', title: '定检日期', align: 'center', width: 120, render: this.renderCellDate},
				    {key: 'examResult', title: '检验结果', align: 'center', width: 120, tooltip: true},
				    {key: 'examCycleName', title: '检验周期', align: 'center', width: 120},
				    {key: 'coordSite', title: '安装位置', align: 'center', width: 120, tooltip: true},
				    {key: 'useStatus', title: '使用状况', align: 'center', width: 120, tooltip: true},
				    {key: 'createDate', title: '填表时间', align: 'left', width: 120, render: this.renderCellDate},
				    {key: 'notes', title: '备注', align: 'center', width: 120, tooltip: true},
				],
				
				samVisible: false,
				samInfo: [],
				samColumns:[
					{title: '序号',width: 65,fixed: 'left',align: 'center',render: (h, params) => {
						return h('span', params.index + (this.pagedata1.currentPage - 1) * this.pagedata1.pageSize + 1);}},
					{title: '姓名', align: 'center', fixed: 'left', key: 'driverName', width: 80,},
					{title: '所属单位', align: 'center', key: 'companyName', minWidth: 160,},
					{title: '所属部门', align: 'center', key: 'departmentName', minWidth: 160,},
					{title: '身份证', align: 'center', key: 'colour', minWidth: 180,},
					{title: '年龄', align: 'center', key: 'license', minWidth: 65,},
					{title: '性别', align: 'center', key: 'brand', width: 65,
					    render: (h, params) => {return h('div', [(params.row.brand === '0'?'男':params.row.brand === '1'?'女':'')])}},
					{title: '作业类型', align: 'center', key: 'workType', width: 160,},
					{title: '岗位', align: 'center', key: 'station', width: 120,},
					{minWidth: 160, title: '项目名称（代号）', align: 'center', key: 'projectName',tooltip:true},
					{title: '证书编号', align: 'center', key: 'certificateNo', minWidth: 180,},
					{title: '发证机关', align: 'center', key: 'certificationAuthority', minWidth: 180,},
					{title: '发证日期', align: 'center', key: 'certificateDate', width: 120, render: this.renderCellDate},
					{title: '有效期', align: 'center', key: 'validityTerm', width: 120, render: this.renderCellDate},
					{title: '复审日期', align: 'center', key: 'reviewDate', width: 120, render: this.renderCellDate},
					{title: '复审情况', align: 'center', key: 'review', width: 120,},
				],
				
				twoLevel:[],
				tableHeight: 10,
				// api
				queryUrl: Api.reportSafeRptSpecialEq,

			}
		},
		mounted() {
			// this.setTableHeight()
			this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
			    this.twoLevel=res.data.data
			})
			this.query();
		},
		methods: {
			...pageCommonFunction,
			query() {
				this.pageStatus.loading = true
				let seriesRadius = {radius: ['40%', '70%']}
				let container1 = echarts.init(this.$refs.echart1);
				let container2 = echarts.init(this.$refs.echart2);
				let container3 = echarts.init(this.$refs.echart3);
				let container4 = echarts.init(this.$refs.echart4);
				let container5 = echarts.init(this.$refs.echart5)
				
				this.$http.post(this.queryUrl, this.dataToQuery).then((res) => {
					if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
				  let dataMap = res.data.data;
					
					let option1 = this.getOption1(dataMap.pieJianList,' 特种设备检定统计');
					container1.setOption(option1);
					container1.on('click', (param) => {
						this.samVisible = false
						this.eqVisible = true
						this.modelVisible = true
						event.stopPropagation() // 阻止冒泡
						this.echartsName = param.name;
						this.queryModel()
					});
					window.onresize = container1.resize;
					
					let option2 = this.getOption1(dataMap.pieCategoryList,' 特种设备类别统计',seriesRadius);
					container2.setOption(option2);
					container2.on('click', (param) => {
						this.samVisible = false
						this.eqVisible = true
						this.modelVisible = true
						event.stopPropagation() // 阻止冒泡
						this.echartsName = param.name;
						this.queryModel()
					});
					window.onresize = container2.resize;
					
					let option3 = this.getOption1(dataMap.pieshenList,' 操作人员整证书审核统计');
					container3.setOption(option3);
					container3.on('click', (param) => {
						this.samVisible = false
						this.eqVisible = true
						this.modelVisible = true
						event.stopPropagation() // 阻止冒泡
						this.echartsName = param.name;
						this.queryModel()
					});
					window.onresize = container3.resize;
					
					let option4 = this.getOption1(dataMap.sexPieList,'操作人员性别统计',seriesRadius);
					container4.setOption(option4);
					container4.on('click', (param) => {
						this.eqVisible = false
						this.samVisible = true
						this.modelVisible = true
						event.stopPropagation() // 阻止冒泡
						this.echartsName = param.name;
						this.queryModel()
					});
					window.onresize = container4.resize;
					
					let option5 = this.getOption1(dataMap.agePieList,'操作人员年龄段统计');
					container5.setOption(option5);
					container5.on('click', (param) => {
						this.eqVisible = false
						this.samVisible = true
						this.modelVisible = true
						event.stopPropagation() // 阻止冒泡
						this.echartsName = param.name;
						this.queryModel()
					});
					window.onresize = container5.resize;
					
					this.pageStatus.loading = false
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pageStatus.loading = false
				})
			},
			queryEq() {
				this.pagedata1.loading = true
				let map = {}
				switch(this.echartsName){
					case '未检':
						map.ifCheck = this.echartsName
						break;
					case '已检':
						map.ifCheck = this.echartsName
						break;
					default:
						map.categoryName = this.echartsName
					  break;
				}
				let data = {
					startPage: this.pagedata1.currentPage,
					size: this.pagedata1.pageSize,
					conditions:{
						...this.dataToQuery,
						...map
					},
				}
				this.modalTitle = '特种设备(' + this.echartsName + ')'
				this.$http.post(Api.querySafeRptSpecialEq, data).then((res) => {
					this.eqInfo = res.data.data.data;
					this.pagedata1.total = res.data.data.totalSize;
					this.pagedata1.loading = false;
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pagedata1.loading = false
				})
			},
			querySam() {
				this.pagedata1.loading = true
				let map = {}
				switch(this.echartsName){
					case '未审核':
						map.ifCheck = this.echartsName
						break;
					case '已审核':
						map.ifCheck = this.echartsName
						break;
					case '男':
						map.brand = '0'
						break;
					case '女':
						map.brand = '1'
						break;
					case '20岁以下':
						map = {ageFrom: 1,ageTo: 19}
						break;
					case '20-30岁':
						map = {ageFrom: 20,ageTo: 29}
						break;
					case '30-40岁':
						map = {ageFrom: 30,ageTo: 39}
						break;
					case '40-50岁':
						map = {ageFrom: 40,ageTo: 49}
						break;
					case '大于50岁':
						map = {ageFrom: 50,ageTo: 100}
						break;
				}
				let data = {
					startPage: this.pagedata1.currentPage,
					size: this.pagedata1.pageSize,
					conditions:{
						...this.dataToQuery,
						...map
					},
				}
				this.modalTitle = '操作人员(' + this.echartsName + ')'
				this.$http.post(Api.saSemWorkerInfoQuery, data).then((res) => {
					this.samInfo = res.data.data.data;
					this.pagedata1.total = res.data.data.totalSize;
					this.pagedata1.loading = false;
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pagedata1.loading = false
				})
			},
			pageChange1(pageNum) {
				this.pagedata1.currentPage = pageNum;
				this.queryModel();
			},
			pageSizeChange1(pageSize) {
			 this.pagedata1.pageSize = pageSize;
				this.queryModel();
			},
			queryModel() {
				if (this.eqVisible) {
					this.queryEq()
				} else {
					this.querySam()
				}
			},
			
			
			
			getOption1(data,titleText,seriesRadius) {
				return {
					title: {
						text: titleText,
						textStyle: {
							fontSize: 14
						},
						left: 'center'
					},
					tooltip: {
						show: true,
					},
					legend: {
						icon: "circle",
						orient: 'vertical',
						right: '15%',
						y: "center",
						type: 'scroll',
						itemHeight: 18,
						tooltip: {
							show: true
						},
						formatter: function(name) {
							let total = 0;
							let target;
							for (let i = 0; i < data.length; i++) {
								total += data[i].value;
								if (data[i].name == name) {
									target = data[i].value;
								}
							}
							if (!target) {
								target = 0;
							}
							let percentage = 0
							if (total) {
								percentage = ((target / total) * 100).toFixed(2) + '%';
							}
							return name + '  ' + target + '  ' + percentage;
						},
					},
					color: ['#42A5F5', '#4CD1A8', '#FFC310', '#FD5C50'],
					series: [{
						// name: '承包商评价',
						type: 'pie',
						// radius: ['40%', '70%'],
						...seriesRadius,
						center: ["25%", "50%"],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 8,
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: false,
							}
						},
						labelLine: {
							show: false
						},
						data: data
					}]
				};
			},
			
		}
	}
</script>
<style scoped>
	/deep/ .table-box .ivu-table-header th {
		position: static;
		border: 1px solid #ddd;
	}
</style>
